<template>
  <view>
    <a-card :title="null">
      <a-table :dataSource="restrainList" :columns="columns" :custom-row="customRow" >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="openEdit(record)">
              编辑
            </a-button>
          </template>
          <template v-else-if="column.key === 'id'">
            <div :class="record.restrain_detail ? 'bg-red' : ''">{{ record.id }}</div>
          </template>
        </template>
      </a-table>
      <restrain-edit v-model:visible="showEdit" :data="current" :restrain="restrainList" @done="reload"/>
    </a-card>
  </view>
</template>

<script setup>
  import {listRestrain} from "../../../api/restrain";
  import {onMounted, ref} from "vue";
  import RestrainEdit from "@/views/restrain/components/restrain-edit.vue";

  const restrainList = ref([])

  const customRow = (record) => {
    return {
      onDblclick: () => {
        openEdit(record);
      }
    };
  }

  const columns = ref([
    {
      title: 'id',
      key: 'id',
      dataIndex: 'id'
    },
    {
      title: '名称',
      dataIndex: 'cn'
    },
    {
      title: '操作',
      key: 'action'
    }
  ])

  const current = ref(null)
  const showEdit = ref(false)
  const openEdit = (record) => {
    current.value = record
    showEdit.value = true
  }

  const reload = async () => {
    restrainList.value = await listRestrain()
  }

  onMounted(async () => {
    restrainList.value = await listRestrain()
  })
</script>

<style scoped>

</style>
